﻿@page "/dropdown"

@using NorthwindBlazor.Data
@using NorthwindBlazor.Models.Northwind

@inject NorthwindContext dbContext

<RadzenExample Name="DropDown">
<div class="row">
    <div class="col-md-6">
        <h3>DropDown</h3>
        <RadzenDropDown AllowClear="true" TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Data="@(customers.Select(c => new { CustomerID = c.CustomerID, CompanyName = c.CompanyName }).Distinct())" TextProperty="CompanyName" ValueProperty="CustomerID" Style="margin-bottom: 20px" Change="@(args => Change(args, "DropDown"))" />
        <br />
        <h3>DropDown with placeholder</h3>
        <RadzenDropDown AllowClear="true"  TValue="string" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px" />
        <br />
        <h3>DropDown with template</h3>
        <RadzenDropDown AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="value" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                        Change="@(args => Change(args, "DropDown with placeholder"))" Style="margin-bottom: 20px; width:400px;">
            <Template>
                Company: @((context as Customer).CompanyName)
            </Template>
        </RadzenDropDown>
        <br />
        <h3>DropDown with multiple selection</h3>
        <RadzenDropDown AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="multipleValues" Multiple="true" Placeholder="Select..." Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID"
                        Change="@(args => Change(args, "DropDown with multiple selection"))" Style="margin-bottom: 20px; width:400px;" />
        <br />
        <h3>Bind DropDown Value to model property</h3>
        <RadzenDropDown AllowClear="true"  AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@products" @bind-Value="myModel.MyValue"
                        TextProperty="ProductName" ValueProperty="ProductID" Style="margin-bottom: 20px; width:400px;" Change="@(args => ChangeBound(args, "DropDown with bound Value"))" />
    </div>
    <div class="col-md-6">
        <h3>Events</h3>
        <RadzenCard style="overflow: auto;height:500px;">
            @foreach (var e in events.OrderByDescending(i => i.Key))
            {
                @e.Value
                <br />
            }
        </RadzenCard>
    </div>
</div>
</RadzenExample>

@code {
    IEnumerable<Customer> customers;
    IEnumerable<Product> products;

    MyObject myModel = new MyObject();

    IEnumerable<string> multipleValues = new string[] { "ALFKI", "ANATR" };
    string value = "ALFKI";

    protected override async Task OnInitializedAsync()
    {
        customers = await Task.FromResult(dbContext.Customers);
        products = await Task.FromResult(dbContext.Products);
    }

    Dictionary<DateTime, string> events = new Dictionary<DateTime, string>();

    void Change(object value, string name)
    {
        var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;

        events.Add(DateTime.Now, $"{name} value changed to {str}");
        StateHasChanged();
    }

    void ChangeBound(object value, string name)
    {
        events.Add(DateTime.Now, $"{name} value changed to {myModel.MyValue}");
        StateHasChanged();
    }

    class MyObject
    {
        public int? MyValue { get; set; } = 3;
    }
}
